<template>
  <div class="home">
    <canvas id="canvas"></canvas>
    <!--内容 B-->
    <div class="hms">
      <!--头部 B-->
      <div class="head">
        <!--标题 B-->
        <div class="title"><span>{{ Obj.visualName }}</span></div>
        <!-- <div class="title"><span>九龙山保护区大数据综合展示平台</span></div> -->
        <!--标题 E-->
        <!--标题下划线 B-->
        <div class="xhx"></div>
        <!--标题下划线 E-->

        <!--tab 导航B-->
        <div class="nav">
          <div>
            <!-- <router-link v-for="(item, index) in navList" :to="{ path: item.path }" :key="index" class="nv"><span>{{
              item.name }}</span>
            </router-link>
            <router-link v-for="(item, index) in routeList" :to="{ path: item.path }" :key="index" class="nvs">
              <div class="box">
                <span>鸟类监测 </span>
                <span><img  @click="btn_toggle" class="nav_span" :src= "status ? item.icon2 : item.icon" alt=""></span>
                <div class="brid_box" v-show="status">
                  <router-link class="links"  v-for="(ite, inde) in item.child" :key="inde" :to="{path:ite.path}" >
                    <div @click="btn_togglenav(inde)" :class="flag == inde ? 'Select' : ''">{{ ite.name }}</div>
                  </router-link>
                </div>
              </div>
            </router-link> -->
            <router-link v-for="item in navList" :key="item.path" :to="{ path: item.path }" class="nv">
              <span @click="flag = 0">{{ item.name }}</span>
            </router-link>

            <div v-for="item in routeList" :key="item.path" class="nvs">
              <div class="box">
                <span @click="navigateTo(item.path, item.name)" :class="{ 'highlight': flag == 1 }">{{ item.name
                  }}</span>
                <span>
                  <img @click.stop="toggleStatus($event)" class="nav_span" :src="item.icon2"
                    alt="" v-if="status">
                  <img @click.stop="toggleStatus($event)" class="nav_span1" :src="item.icon"
                    alt="" v-else>
                </span>
                <div class="brid_box" v-show="status">
                  <router-link class="links" v-for="child in item.child" :key="child.path" :to="{ path: child.path }">
                    <div @click="selectItem(child.name)" :class="{ 'Select': isSelected(child.name) }">
                      {{ child.name }}
                    </div>
                  </router-link>
                </div>
              </div>
            </div>

            <!--<div class="nv"><span>环境监测</span></div>-->
            <!--<div class="nv"><span>森林经营 </span></div>-->

            <!-- 延庆 -->
            <!-- <div class="nv"><span>点位核查</span></div> -->
            <!-- <div class="nv"><span>疫源疫病</span></div> -->
          </div>

        </div>
        <!--tab 导航E-->

      </div>
      <!--头部 E-->

      <!--变换内容 B-->
      <div class="bhnr">
        <router-view />
      </div>
      <!--变换内容 E-->
    </div>
    <!--内容 E-->

    <!--假背景 B-->
    <div class="jbs" v-if="$route.path == '/home/Monitoring'">
      <div></div>
      <div></div>
      <!-- <div></div> -->
    </div>
    <div class="jbj" v-else>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!--假背景 E-->
  </div>
</template>

<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  name: "home",
  data() {
    return {
      // navList: [
      //   { name: '基本信息', path: '/home/jbxx' },
      //   { name: '本底资源', path: '/home/bdzy' },
      //   { name: '巡护监测', path: '/home/xhjc' },
      //   // {name: '视频监控', path: '/home/shipinjiankong'},
      //   { name: '红外相机', path: '/home/hwxj' },

      //   // {name: '森林经营', path: '/home/sljy'},
      //   // {name: '森林保护', path: '/home/slbh'},
      //   // {name: '视频监控', path: '/home/ysy'},
      //   // {name: '点位核查', path: '/home/dwhc'},
      //   // {name: '疫源疫病', path: '/home/yyyb'}
      // ],
      navList: [
        { name: '基本信息', path: '/home/jbxx' },
        { name: '本底资源', path: '/home/bdzy' },
        { name: '巡护监测', path: '/home/xhjc' },
        { name: '红外相机', path: '/home/hwxj' },
      ],
      routeList: [
        {
          name: '鸟类监测',
          path: '/home/Map_monitoring',
          icon: '/static/images/shouqi.png',
          icon2: '/static/images/zhankai.png',
          child: [
            {
              name: '地图监测',
              path: '/home/Map_monitoring',
            },
            {
              name: '监控画面',
              path: '/home/Monitoring',
            },
            {
              name: '统计分析',
              path: '/home/Statistics',
            },
          ]
        },
      ],
      status: false,
      selectedParent: null,
      selectedChild: null,
      flag: 0,
      Obj: {
        name: ""
      },
      areaId: "",
    }
  },
  created() {
    // window.sessionStorage.setItem('areaId', '0000011');

    /*
    野鸭湖
    navList: [
      {name: '基本信息', path: '/home/jbxx'},
      {name: '本底资源', path: '/home/bdzy'},
      {name: '巡护监测', path: '/home/xhjc'},
      // {name: '视频监控', path: '/home/shipinjiankong'},
      {name: '红外相机', path: '/home/hwxj'},
      {name: '视频监控', path: '/home/ysy'},
      // {name: '点位核查', path: '/home/dwhc'},
      // {name: '疫源疫病', path: '/home/yyyb'}
    ],*/
    this.areaId = window.sessionStorage.getItem('areaId');
    this.getEvenDetail();
  },
  mounted() {
    this.remove();
  },
  methods: {
    getEvenDetail() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.EvenDetail + _that.areaId)
        _that.Obj = res.data;

      })()
    },
    navigateTo(path, name) {
      console.log(name, '1111111');
      this.flag = 1
      if (path == '/home/Map_monitoring') {
        this.selectedChild = '地图监测'
      }
      this.$router.push(path);
    },
    toggleStatus(event) {
      event.stopPropagation(); // Stop event from propagating to parent elements
      this.status = !this.status;
    },
    selectItem(parentName) {
      this.status = false
      // console.log(parentName, childName);
      this.selectedChild = parentName;
      // this.selectedChild = childName;
    },
    isSelected(name) {
      return this.selectedChild === name;
      // return this.selectedParent === name || this.selectedChild === name;
    },
    remove() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1000;//星星数量
      let canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      let half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#CCC');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }
        if (min > max) {
          let hold = max;
          max = min;
          min = hold;
        }
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        let max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2.5;
        //星星移动范围，值越大范围越小，
      }

      let Star = function () {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 15;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 400000;
        //星星移动速度
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
      }
      Star.prototype.draw = function () {
        let x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);
        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }
        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }
      for (let i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h)
        ctx.globalCompositeOperation = 'lighter';
        for (let i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        }
        window.requestAnimationFrame(animation);
      }

      animation();
    },
  }
}
</script>

<style scoped>
@import "../../static/css/home.css";
</style>
